<template>
  <view-box ref="viewBox" body-padding-bottom="55px" style="background: #f2f2f2">
    <tab :line-width="2">
      <tab-item :selected="category === 2" @on-item-click="onItemClick(2)">天南山文化</tab-item>
      <tab-item :selected="category === 3" @on-item-click="onItemClick(3)">天南山读书会</tab-item>
    </tab>
    <panel :list="computedList" type="5"></panel>
    <infinite-loading @infinite="infiniteHandler" ref="infiniteLoading">
      <load-more slot="no-more" :show-loading="false" tip="到底了" background-color="#fbf9fe"></load-more>
      <empty slot="no-results" tips="暂时没有相关内容"></empty>
    </infinite-loading>
    <footer-bar  slot="bottom" selected="posts"></footer-bar>
  </view-box>
</template>
<script>
  import FooterBar from '../components/FooterBar'
  import { ViewBox, Panel, Tab, TabItem } from 'vux'
  export default {
    data () {
      return {
        list: [],
        category: 0
      }
    },
    watch: {
      category () {
        this.list = []
        this.$nextTick(() => {
          this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset')
        })
      }
    },
    computed: {
      computedList () {
        let list = []
        this.list.forEach((item) => {
          list.push({
            src: this.$apiUrl + '/storage/' + item.thumb,
            title: item.title,
            desc: item.description,
            url: '/posts/' + item.id,
            meta: {
              source: item.from,
              date: item.created_at,
              other: item.editor
            }
          })
        })
        return list
      }
    },
    components: {
      ViewBox,
      Panel,
      Tab,
      TabItem,
      FooterBar
    },
    created () {
      this.category = parseInt(this.$route.query.category)
    },
    methods: {
      onItemClick (id) {
        this.category = id
      },
      infiniteHandler ($state) {
        this.$http.get('/posts', {
          params: {
            category_id: this.category,
            page: this.list.length / 20 + 1,
            page_size: 20
          }
        }).then((response) => {
          if (response.data.data.length) {
            this.list = this.list.concat(response.data.data)
            $state.loaded()
            if (!response.data.next_page_url) {
              $state.complete()
            }
          } else {
            $state.complete()
          }
        })
      }
    }
  }
</script>
<style scoped>
  .order {
    margin-top: 10px;
    margin-bottom: 10px;
  }
</style>
